<style scoped>
div {
  display: inline-block;
}

.ban {
  width: 50px;
  height: 30px;
  background-color: aqua;
}

.my-img {
  width: 85px;
  height: 85px;
  border-radius: 50%;
}
</style>

<template>
  <div class="my-img" @click="$refs.file.click()">
    <form ref="form" enctype="multipart/form-data" style="display: none">
      <input ref="file" :accept="accept" name="file" type="file" @change="upload" />
    </form>
  </div>
</template>

<script>
export default {
  props: ["type", "url", "done"],
  data: () => ({}),
  created() {
    // console.log(this.$refs.file, 'this.$refs.form');
  },
  methods: {
    upload() {
      axios
        .post(this.url, new FormData(this.$refs.form))
        .then((res) => {
          this.$emit("uploaded", res.data.data);
          alert(JSON.stringify(res.data));
          if (this.done) this.done();
          if (this.type != "video" && this.type != "img") alert("成功");
        })
        .catch(() => {
          alert('上传失败')
          this.$refs.file.value = ""
        });
    },
  },
  computed: {
    accept() {
      return {
        img: "image/png, image/jpg, image/jpeg",
        video: "video/*",
      }[this.type];
    },
  },
};
</script>
